<script setup>
import {computed, ref, watch, onUpdated,onMounted,onUnmounted} from 'vue'

// const props = defineProps(['label', 'placeholder', 'describe', 'color'])
const props = defineProps({
  label: {
    type: String
  },
  placeholder: {
    type: String
  },
  describe: {
    type: String
  },
  color: {
    type: String
  },
  modelValue: {
    type: String,
    required: false
  }
})
const emit = defineEmits(['update:modelValue']);
// const inputVal = ref('1002')
const inputVal = ref(props.modelValue);
const keyboardShow = ref(false);
const focused = ref(false);
const customSelect = ref(null)
const colorStyle = computed(() => {
  return props?.color ? {
    color: `${props?.color}`
  } : ''
})
watch(inputVal, (n) => {
  if (n) {
    emit('update:modelValue', n)
  }
})
watch(focused,(n=>{
  if (n) {

  }
}))
onUpdated(() => {
  // console.log('inner modelValue',props?.modelValue)
  inputVal.value = props?.modelValue;
})
const onBlur = () => {
  console.log('onBlur')
  keyboardShow.value = false;
  focused.value = false;
}
const onDelete = () => {
  // 修复数据不能全部清空的bug
  const l = String(inputVal.value).length
  if (l === 1) {
    inputVal.value = '';
    emit('update:modelValue', inputVal.value);
  }
}
const onShow = () => {
  focused.value = true;
}
const onHide = ()=>{
  focused.value = false;
}
const onInput = (val)=>{
  console.log('input...',val)
}


</script>

<template>
<!--  <div style="font-size:12px;">focused：{{focused}}</div>-->
  <div class="input-container" @click.stop>
    <div class="input-wrap">
      <!--    <div class="input__tg">-->
      <!--      <div class="input__label">-->
      <!--        {{label || '?'}}-->
      <!--      </div>-->
      <!--    </div>-->
      <div class="input__add">
        <div class="leftIcon"><img src="../assets/images/icon_minus@3x.png" alt=""></div>
        <div class="centerText" ref="customSelect">

          <!--          <input @focus.prevent.stop readonly-->
          <!--                 @blur="keyboardShow=false"-->
          <!--                 @touchstart.stop="keyboardShow = true"-->
          <!--                 :value="inputVal"-->
          <!--                 :style="colorStyle"-->
          <!--                 :placeholder="placeholder"-->
          <!--                 type="text"-->
          <!--                 class="inputTxt"-->
          <!--          >-->

          <div class="inputTxt"
               :style="colorStyle"
               @touchstart.stop="keyboardShow = true"
          >
            <template v-if="inputVal||focused">
<!--              <input style="width:100px;border:1px solid red"  type="text">-->
              <div class="input">{{ inputVal }}</div>
              <div v-if="focused" :class="{ 'cursor-flicker': focused }"></div>
              <div v-else class="cursor-placeholder"></div>
            </template>
            <template v-else>
              <div class="placeholder">
                {{ placeholder || '?' }}
              </div>
            </template>
          </div>
          <div class="describe"  @touchstart.stop="keyboardShow = true" v-if="describe">{{ describe || '?' }}</div>
        </div>
        <div class="rightIcon"><img src="../assets/images/icon_plus@3x.png" alt=""></div>
      </div>
    </div>
  </div>
  <div class="mask-bg" @touchstart.stop v-if="keyboardShow"></div>
  <teleport to="body">
    <van-number-keyboard
        v-model="inputVal"
        :show="keyboardShow"
        :maxlength="9"
        theme="custom"
        :extra-key="['00', '.']"
        close-button-text="完成"
        @blur="onBlur"
        @delete="onDelete"
        @show="onShow"
        @hide="onHide"
        @input="onInput"
    />
  </teleport>
</template>

<style scoped lang="scss">
.mask-bg{
  background: rgba(0,0,0,0.06);
  width: 100%;
  height: 100%;
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin:auto;
  z-index:99;
}
.input-container {
  border-radius: 8px;
  background: #fff;
}

.input-wrap {
  width: 100%;
  min-height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: #fff;

  .input__tg {
    //width:85px;
    .input__label {
      padding: 0 6px;
      white-space: nowrap;
      height: 15px;
      color: rgba(29, 33, 50, 1);
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 15px;

      &:after {
        content: " ";
        width: 1px;
        height: 20px;
        border: 1px solid #F2F2F2;
        margin-left: 8px;
      }
    }
  }

  .input__add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-right: 20px;
    margin-right: 15px;

    .leftIcon,
    .rightIcon {
      flex: none;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      //border:1px solid red;
      &:active {
        background: #F6F6F6;
        border-radius: 2px;
      }

      img {
        width: 32px;
        height: 32px;
      }
    }

    .centerText {
      flex-direction: column;
      display: flex;
      justify-content: center;
      align-items: center;

      .placeholder {
        font-size: 14px;
      }

      input::input-placeholder {
        font-size: 14px;
      }

      input::-webkit-input-placeholder { //兼容WebKit browsers（Chrome的内核）
        font-size: 14px;
      }

      input::-moz-placeholder { //Mozilla Firefox 4 to 18
        font-size: 14px;
      }

      input::-moz-placeholder { //Mozilla Firefox 19+
        font-size: 14px;
      }

      input::-ms-input-placeholder { //Internet Explorer 10+
        font-size: 14px;
      }

      .inputTxt {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        color: rgba(36, 37, 38, 1);
        font-family: DINPro-Medium;
        font-weight: 450;
        font-size: 18px;
      }
      .describe {
        white-space: nowrap;
        height: 17px;
        text-align: center;
        color: rgb(165, 166, 173);
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        line-height: 17px;
      }
    }
  }
}

.cursor-flicker,
.cursor-placeholder{
  width: 2px;
  height: 16px;
  border-radius: 2px;
  margin-left: 2px;
  margin-top:1px;
}
.cursor-flicker {
  animation: blinking 1s infinite;
  opacity: 0;
  background: #6EBAF0;
}
.cursor-placeholder{ // 占位
  background: none;
}

@keyframes blinking {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>